

<div class="box_photo_avata" id="cropbox_div_container">
    <div id="inform-main">
    		Chọn vị trí ảnh đại diện của bạn. Bạn có thể mở rộng ảnh bằng cách kéo ô vuông góc dưới của khung.
    </div>
    <div id="rotate"></div> 
    <div class="box_repeair">
        <div id="crop_container" >
            <svg id="k" width="680" height="350" preserveAspectRatio="none">

            </svg>
            <div id="crop_container_selector" class="ui-draggable ui-resizable">
            </div>

            <div class="clear"></div>
        </div>
    </div>
    <div id="zoom"></div>
    <div class="button_bottom">
        <div class="btn-left-02"><input type="button" class="btnBlogComment left" value="Đồng ý" name="crop" id="crop"></div>
        <div class="btn-left-07"><input type="button" class="left button " value="Hủy bỏ" onclick="window.parent.Lightbox.hide();"></div>
        <img src="/images/loading_small.gif" style="display:none" class="loading">
        <div class="clear"></div>
    </div>
</div>
<?php
list($width, $height) = getimagesize(DOMAIN . str_replace('a-', '', $_SESSION['client']['avatar']));
?>

<script type="text/javascript">
    $(document).ready(function(){
        //var source=$parent() $('#avatar').attr("src");
        var cropzoom = $('#crop_container').cropzoom({
            width:680,
            height:400,
            bgColor: '#fff',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:5,
            rotationSteps:10,
            expose:{
                slidersOrientation: 'vertical',
                zoomElement: '#zoom',
                rotationElement: '#rotate'
            },
            selector:{
                w:192,
                h:192,
                centered:true,
                borderColor:'orange',
                borderColorHover:'#1C9658',
                startWithOverlay: true,
                hideOverlayOnDragAndResize: false,
                maxWidth:190,
                maxHeight:400
            },
            image:{
                source:'<?php echo str_replace('a-', '', $_SESSION['client']['avatar']); ?>',
                width: <?php echo $width; ?>,
                height:<?php echo $height; ?>,
                minZoom:50,
                maxZoom:150,
                startZoom:0,
                useStartZoomAsMinZoom:false,
                snapToContainer:false
            }
        });
                

        $('#crop').click(function(){
            $('.loading').show();
            cropzoom.send('/process.php?action=crop_img','POST',{},function(rta){
                //var response = $.parseJSON(rta);
                
                var $parent_document = $(window.parent.document);
                $parent_document.find('#spanAvatar').find('img').remove();
                var img = $('<img />').attr('src',rta+"?time=" + new Date().getTime());
                $parent_document.find('#spanAvatar').append(img);                    
                $parent_document.find('.loading').hide();                    
                window.parent.Lightbox.hide();
            });
        });
         
    });
</script>


